<template>
  <div class="shell" id="shell">
    <div class="header">
<!--      @click="setSortIds"-->
      <h2 class="title" >I And You</h2>
      <h3 class="subtitle" @click="setTid">
        视 频 轴
        <br>
      </h3>
    </div>
      <div class="timeline" >
        <div class="item" :data-text="item.title" v-for="item in timeLineList" :key="item.index">
          <div class="content">
            <img  :src="item.img" alt="" class="img" style="height: 0px">
            <video  id="myVideo" v-bind:src="item.videoSrc" controls class="img"></video>
            <h2 style="margin-top: -15px" class="content-title" @click="nextVidio">
                {{item.year}}
            </h2>

            <p class="content-desc">
              {{item.content}}
            </p>
          </div>
        </div>
      </div>

    <el-dialog title="视频轴" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="视频轴内容选择" :label-width="formLabelWidth">
          <el-select v-model="form.tid" placeholder="请选择时光轴ID">
            <el-option label="我的宝宝" value="0"></el-option>
            <el-option label="MTV万首" value="21"></el-option>
            <el-option label="高清横屏" value="20"></el-option>
            <el-option label="DJ姐姐" value="1"></el-option>
            <el-option label="极品钰足" value="2"></el-option>
            <el-option label="学姐系列" value="3"></el-option>
            <el-option label="卡哇伊" value="4"></el-option>
            <el-option label="嫩嫩系列" value="5"></el-option>
            <el-option label="丝滑舞蹈" value="6"></el-option>
            <el-option label="完美身材" value="7"></el-option>
            <el-option label="慢摇系列" value="8"></el-option>
            <el-option label="丝滑吊带" value="9"></el-option>
            <el-option label="清纯系列" value="10"></el-option>
            <el-option label="COS系列" value="11"></el-option>
            <el-option label="街拍系列" value="12"></el-option>
            <el-option label="精品变装" value="13"></el-option>
            <el-option label="极品萝莉" value="14"></el-option>
            <el-option label="你的欲梦" value="15"></el-option>
            <el-option label="甜美系列" value="16"></el-option>
            <el-option label="御丝系列" value="17"></el-option>
            <el-option label="帅哥鲜肉" value="18"></el-option>
            <el-option label="热舞系列" value="19"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>

<script>
import constant from "../utils/constant";
export default {
  name: "vidio",
  data() {
    return {
      dialogFormVisible:false,
      formLabelWidth:'120px',
      timeLineList: [],
      form:{
        tid:0,
      },
      selectors: {
        item: null,
        activeClass: 'item--active',
        img: '.img'
      }
    }
  },
  created() {
    this.getTimeLine();
  },

  methods: {
    nextVidio(){
      this.getTimeLine();
    },
    //视频类型
    setTid(){
      this.dialogFormVisible=true;
    },
    sure(){
      // alert(this.form.sotId)
      this.timeLineList=[];
      this.getTimeLine();
      this.dialogFormVisible=false;
    },
    getTimeLine() {
      //this.videoSrc="https://vodm2lzexwq.vod.126.net/vodm2lzexwq/NyHiRfwx_8939770959_sd.mp4?resId=254486990bfa2cd7aa860229db639341_8939770959_1&authSign=6563b58fe2d37b7ee0a061918863c9d8b2fb1b0f&authTime=1740762389"
      // 这里需要指定sortId的值也就是文章的表分类id的值
      this.$http.get(this.$constant.baseURL + "/webInfo/getVidioList?tid="+this.form.tid)
        .then(resp => {
          for (let i = 0; i < resp.length; i++) {
            const createTime = new Date(resp[i].createTime);
            // const year = createTime.getFullYear();
            // const mouth = createTime.getUTCMonth();
            // const days = createTime.getDay();
            let item = {
              year:resp[i].createTime.substring(0,7),
              //时间
              time: resp[i].createTime,
              //标题
              title: resp[i].articleTitle,
              //封面
              img: resp[i].articleCover,
              content: resp[i].content,
              videoSrc: resp[i].url
            }
            this.timeLineList.push(item);
          }
          this.$nextTick(() => {
            this.selectors.item = this.$el.querySelectorAll('.item');
            this.selectors.item[0].classList.add(this.selectors.activeClass);
            this.$el.style.backgroundImage = `videoSrc(${
              this.selectors.item[0].querySelector(this.selectors.img).getAttribute('src')
            })`;
          });
        });

    }

  },
  mounted() {
    window.addEventListener('scroll', () => {
      const itemLength = this.selectors.item.length;
      let max, min;
      const pos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

      this.selectors.item.forEach((el, i) => {
        min = el.offsetTop;
        max = el.offsetHeight + el.offsetTop;

        if (i === itemLength - 2 && pos > min + el.offsetHeight / 2) {
          this.selectors.item.forEach(item => item.classList.remove(this.selectors.activeClass));
          this.$el.style.backgroundImage = `url(${
            this.selectors.item[itemLength - 1].querySelector(this.selectors.img).getAttribute('src')
          })`;
          this.selectors.item[itemLength - 1].classList.add(this.selectors.activeClass);
        } else if (pos <= max - 10 && pos >= min) {
          this.$el.style.backgroundImage = `url(${el.querySelector(this.selectors.img).getAttribute('src')})`;
          this.selectors.item.forEach(item => item.classList.remove(this.selectors.activeClass));
          el.classList.add(this.selectors.activeClass);
        }
      });
    });
  },


};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
/*自定义的样式*/
.media-container {
  display: flex;
  justify-content: space-between;
}

.media-item {
  flex: 1;
  /* 其他样式 */
}
/*自定义的样式*/
.shell {
  width: 100%;
  position: relative;
  padding: 80px 0;
  transition: 0.3s ease 0s;
  background-attachment: fixed;
  background-size: cover;
}

.shell:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(99, 99, 99, 0.8);
  content: "";
}

.header {
  width: 100%;
  text-align: center;
  margin-bottom: 80px;
  position: relative;
}

.title {
  color: #fff;
  font-size: 46px;
  font-weight: normal;
  margin: 0;
}

.timeline {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  flex-direction: column;
  max-width: 700px;
  position: relative;
}

.content-title {
  font-weight: normal;
  font-size: 66px;
  margin: -10px 0 0 0;
  transition: 0.4s;
  padding: 0 10px;
  box-sizing: border-box;
  color: #fff;
}

.content-desc {
  margin: 0;
  font-size: 15px;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.7);
  line-height: 25px;
}

.timeline:before {
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  content: "";
  background: rgba(255, 255, 255, 0.07);
}

.item {
  padding: 40px 0;
  opacity: 0.3;
  filter: blur(2px);
  transition: 0.5s;
  box-sizing: border-box;
  width: calc(50% - 40px);
  display: flex;
  position: relative;
  transform: translateY(-80px);
}

.item:before {
  content: attr(data-text);
  letter-spacing: 3px;
  width: 100%;
  position: absolute;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  top: 70%;
  margin-top: -5px;
  padding-left: 15px;
  opacity: 0;
  right: calc(-100% - 56px);
  font: 900 20px '';
  letter-spacing: 5px;
}

.item:nth-child(even) {
  align-self: flex-end;
}

.item:nth-child(even):before {
  right: auto;
  text-align: right;
  left: calc(-100% - 56px);
  padding-left: 0;
  border-left: none;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
  padding-right: 15px;
}

.item--active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

.item--active:before {
  top: 50%;
  transition: 0.3s all 0.2s;
  opacity: 1;
}

.item--active .content-title {
  margin: -50px 0 20px 0;
}

.img {
  max-width: 100%;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
}

.subtitle {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  letter-spacing: 5px;
  margin: 10px 0 0 0;
  font-weight: normal;
}

.footer {
  padding: 95px 0;
  text-align: center;
}

.footer a {
  color: #999;
  display: inline-block;
}

@media only screen and (max-width: 767px) {
  .item {
    align-self: baseline !important;
    width: 100%;
    padding: 0 30px 150px 80px;
  }

  .item:before {
    left: 10px !important;
    padding: 0 !important;
    top: 50px;
    text-align: center !important;
    width: 60px;
    border: none !important;
  }

  .item:last-child {
    padding-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .timeline:before {
    left: 40px;
  }
}
</style>
